<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>商品展示页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div style="margin-top:70px;" id="product" ></div>
<div style="margin-top:640px;margin-left:200px;">
    <div  id="layuipage" ></div>
</div>

//分页的完整功能，page，limit，resCount都是自定义的全局变量
function renderPage1(){
renderProduct(page, limit);//关键
laypage.render({
elem: 'layuipage'//div的id，不能加#
,count: resCount//数据总条数
,limit: limit//每页显示多少条数据
,limits: [limit]//可选择的 每页显示多少条数据
,curr: page//当前页码
,theme: '#FFB800'//分页导航栏的颜色，用了橘色
,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
,jump: function(obj, first){
console.info(obj);
page = obj.curr;
if(!first){//如果不是首次加载，那么进行ajax同步获取数据请求
renderProduct(page, limit);//关键
}
}
});
}
<script>
    layui.use(['jquery', 'layer', 'miniAdmin', 'miniTongji', 'laypage'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            miniAdmin = layui.miniAdmin,
            miniTongji = layui.miniTongji,
            laypage = layui.laypage;

        var page = 1;//当前页
        var limit = 16;//每页显示的数目
        var resCount, resData ;
        var resPage = renderPage1();

        //渲染展示商品的html页面
        function renderProductHtml(data){
            var str = "";//用来存储html内容
            if(data.length > 0){
                $.each(data, function(v, o){
                    str += "<div style='margin:auto; margin-bottom:130px;  width:150px; height:150px; float:left; text-align:center'><div><img alt='' src='"+o.imgPath+"' width='150px' height='150px'/></div>";
                    str += "<div style='text-align:left'><div><label>商品名称:</label><span>"+o.productName+"</span></div>";
                    str += "<div><label>价格:</label><span style='color:#FF3030;'>￥"+o.price+"</span></div>";
                    str += "<div><label>新旧程度:</label><span>"+o.degree+"</span></div>";
                    str += "<div><label>销量:</label><span style='color:#CDC9C9;'>"+o.sales+"</span>";
                    str += "<label>库存:</label><span style='color:#CDC9C9;'>"+o.stock+"</span></div>";
                    str += "<div style='display:none;'><label>商品ID:</label><span>"+o.product_id+"</span></div></div></div>";
                });
                $("#product").html(str);
            }

        }


        //同步加载商品数据
        function renderProduct(page, limit){
            $.ajax({
                async: false,
                url: '/UsedProduct/product/getProductPage',
                data: {"page": page, "limit": limit},
                dataType: 'json',
                success: function(result){
                    console.info(result);
                    resCount = result.count;
                    resData = result.data;
                    renderProductHtml(resData);
                }
            });
        }


        //分页的完整功能
        function renderPage1(){
            renderProduct(page, limit);
            laypage.render({
                elem: 'layuipage'
                ,count: resCount
                ,limit: limit
                ,limits: [limit]
                ,curr: page
                ,theme: '#FFB800'
                ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                ,jump: function(obj, first){
                    console.info(obj);
                    page = obj.curr;
                    if(!first){
                        renderProduct(page, limit);
                    }
                }
            });
        }
    });
</script>



</body>
</html>